<template>
  <base-window :title="$t('common.task.button.review')" size="large" :show.sync="visible" width="700px" class="task-feedback-dialog">
    <div class="base-modal-content">
      <div class="form-view-row">
        <label>{{$t('task.detail.components.serviceDegree')}}</label>
        <div class="star-evaluate-row" >
          <label class="degree-item">
            <base-service-star :value="form.evaluate.attribute.boliDegree" @input="marks($event)" :handle="allowModify"></base-service-star>
          </label>
        </div>
      </div>
      <div class="form-view-row">
        <div class="form-view-row-content">
          {{$t('task.detail.components.boLiProcessEvaluate')}}
        </div>
      </div>
      <div class="form-view-row" >
        <label>{{$t('task.detail.components.serviceAttitude')}}</label>
        <div class="form-view-row-content">
          <label class="degree-item" v-for="item in degreeOption" :key="item.value">
            <input type="radio" class="hidden" name="boliServiceAttitude" :value="item.value" v-model="form.evaluate.attribute.boliServiceAttitude" :disabled="!allowModify" />
            <span :class="['evaluate-degree-img', getDegreeImg(item.value, form.evaluate.attribute.boliServiceAttitude == item.value)]"></span>
            <span class="degree-text">{{ item.label }}</span>
          </label>
        </div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.detail.components.repairResults')}}</label>
        <div class="form-view-row-content">
          <label class="degree-item" v-for="item in degreeOption" :key="item.value">
            <input type="radio" class="hidden" name="boliMaintenanceResults" :value="item.value" v-model="form.evaluate.attribute.boliMaintenanceResults" :disabled="!allowModify" />
            <span :class="['evaluate-degree-img', getDegreeImg(item.value, form.evaluate.attribute.boliMaintenanceResults == item.value)]"></span>
            <span class="degree-text">{{ item.label }}</span>
          </label>
        </div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.detail.components.isInTime')}}</label>
        <div class="form-view-row-content">
          <label class="degree-item" v-for="item in degreeOption" :key="item.value">
            <input type="radio" class="hidden" name="boliOnTime" :value="item" v-model="form.evaluate.attribute.boliOnTime" :disabled="!allowModify" />
            <span :class="['evaluate-degree-img', getDegreeImg(item.value, form.evaluate.attribute.boliOnTime == item.value)]"></span>
            <span class="degree-text">{{ item.label }}</span>
          </label>
        </div>
      </div>
      <div class="form-view-row" v-if="evaluateConfig.useTagEvaluate && tagEvaluates.length">
        <label>{{$t('task.detail.components.serviceTag')}}</label>
        <div class="form-view-row-content evaluate-tag">
          <label class="tag-item" v-for="name in tagEvaluates" :key="name">
            <input type="checkbox" class="hidden" :value="name" v-model="form.evaluate.attribute.tagEvaluates" :disabled="!allowModify">
            <span class="evaliate-tag-item">{{ name }}</span>
          </label>
        </div>
      </div>
      <div class="form-view-row" v-if="evaluateContent">
        <label>{{$t('task.customerEvaluation')}}</label>
        <div class="form-view-row-content">{{ evaluateContent }}</div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.detail.components.evaluateSuggestion')}}</label>
        <div class="form-view-row-content">
          <textarea v-model="form.suggestion" :placeholder="$t('task.detail.components.feedbackPlaceholder2')" rows="3" maxlength="500" />
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" v-if="!evaluateConfig.autoCloseTask">{{$t('common.base.cancel')}}</el-button>
      <el-button class="close-task-btn" @click="submit(true)" :disabled="pending" v-else>{{$t('task.detail.components.reviewAndCloseTask')}}</el-button>
      <el-button type="primary" @click="submit(false)" :disabled="pending">{{$t('common.task.button.review')}}</el-button>
    </div>
  </base-window>
</template>

<script>
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';

/* util */
import _ from 'lodash';

export default {
  name: 'task-feedback-dialog-boli',
  props: {
    task: {
      type: Object,
      default: () => ({})
    },
    evaluateConfig: {
      type: Object,
      default: () => ({})
    },
    taskEvaluate:{
      type:Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      pending: false,
      // TODO 国际化待办 value参数为中文
      degreeOption: [{
        value: '满意',
        label: this.$t('task.detail.components.satisfied')
      }, {
        value: '不满意',
        label: this.$t('task.detail.components.dissatisfied')
      }],
      allowModify: true, // 是否可以修改客户评价
      hasFeedback: false, // 是否回访过
      evaluateContent: '', // 客户评价(自动回访)
      form: this.buildForm()
    }
  },
  computed: {
    tagEvaluates(){
      return this.evaluateConfig.tagEvaluates || [];
    }
  },
  methods: {
    getDegreeImg(type, selected) {
      if (type === this.degreeOption[0].value) {
        return selected ? 'review-degree-satisfy-active' : 'review-degree-satisfy';
      }

      if (type === this.degreeOption[1].value) {
        return selected ? 'review-degree-unsatisfy-active' : 'review-degree-unsatisfy';
      }
    },
    marks(value){
      this.form.evaluate.attribute.boliDegree = value
    },
    buildForm() {
      return {
        taskId: this.task.id,
        suggestion: '',
        evaluate: {
          attribute:{
            boliDegree:0,
            boliServiceAttitude:'',
            boliMaintenanceResults:'',
            boliOnTime:'',
            tagEvaluates:[]
          }
        }
      }
    },
    openDialog() {
      // 初始化数据
      this.form = this.buildForm();

      // 判断是否回访过
      if (this.taskEvaluate?.attribute?.boliDegree) {
        this.hasFeedback = true;
        this.form.suggestion = this.task.suggestion || '';
        this.evaluateContent = this.task.evaluateContent || '';
        this.form.evaluate.attribute = this.taskEvaluate.attribute || {};

      }

      // 若已回访过并且满意度设置禁用评价内容可修改时，不可修改
      this.allowModify = !(this.hasFeedback && !this.evaluateConfig.modifyEvaluate);

      this.visible = true;
    },
    async submit(autoClosed) {
      const {boliDegree, boliServiceAttitude, boliMaintenanceResults, boliOnTime} = this.form.evaluate.attribute
      if(!boliDegree){
        this.$platform.alert(this.$t('task.tip.feedbackTip6'))
        return false
      }
      // 满意度小于5时服务态度必填校验
      if(boliDegree < 5) {
        let message = [];
        if(!boliServiceAttitude){
          message.push(this.$t('task.tip.feedbackTip7'))
        }
        if(!boliMaintenanceResults){
          message.push(this.$t('task.tip.feedbackTip8'))
        } 
        if(!boliOnTime){
          message.push(this.$t('task.tip.feedbackTip9'))
        }

        // 允许修改客户评价时
        if(message.length > 0 && this.allowModify) return this.$platform.alert(message.join('\n'));
      }

      this.pending = true;

      const checkParams = {
        id: this.task.id,
        suggestion: this.form.suggestion,
        baseEvaluateInfo: this.form.evaluate
      }
      // 回访是否需要审批
      const result = await this.$http.post(`/task/approve/boli/degreeForView?autoClosed=${autoClosed}`, checkParams);
      // TODO 需要审批判断改成errorCode
      if (!result.succ && Number(result.errorCode) == 10003) {
        this.visible = false;
        this.pending = false;

        this.$emit('proposeApprove', result.data);
        return;
      }

      if (!await this.$platform.confirm(this.$t('task.tip.feedbackTip3'))) return this.pending = false;

      const params = _.cloneDeep(this.form);
      params.autoClosed = autoClosed;

      TaskApi.reviewTaskBoli(params).then((res) => {
        if (res.success) {
          this.$platform.notification({
            type: 'success',
            title: this.$t('task.tip.feedbackTip4')
          })

          window.location.reload();
        } else {
          this.$platform.alert(res.message);
          this.pending = false;
        }
      })
        .catch((err) => {
          this.pending = false;
        })
    }
  }
}
</script>

<style lang="scss">
.task-feedback-dialog {
  .form-view-row {
    padding: 6px 0px;

    .degree-item, .tag-item {
      width: auto !important;
      margin-right: 16px;
      cursor: pointer;
    }

    .tag-item {
      margin-right: 0px;
    }
  }

  .close-task-btn {
    max-width: 120px !important;
  }
}
</style>
